<template>
  <div>
    <div id="pieChart1" style="height: 800px; width: 800px; float: left"></div>
    <div id="pieChart2" style="height: 800px; width: 900px; margin-left: auto;"></div>
  </div>

</template>

<script>
import * as echarts from 'echarts'
import { findWeekInOut } from '../../../http/request'
export default {
  name: 'weekInOutStationPassenger',
  data () {
    return {
      in_num: [],
      out_num: [],
      hour: []
    }
  },
  mounted () {
    // this.pieChart1();
    // this.pieChart2();
    findWeekInOut().then(res => {
      for (let r in res.data) {
        this.in_num.push(res.data[r].inNum)
        this.out_num.push(res.data[r].outNum)
        this.hour.push(res.data[r].hour)
      }
      this.pieChart1()
      this.pieChart2()
    })
  },
  methods: {
    pieChart1 () {
      let pieChart = echarts.init(document.getElementById('pieChart1'))
      pieChart.setOption({
        title: {
          text: '一年中一星期内各天出入站人数',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        },
        legend: {
          top: 'bottom'
        },
        xAxis: {
          type: 'category',
          data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
          width: '800px'
        },
        yAxis: {
          type: 'value',
          max: Math.max(...this.in_num) + 10000
        },
        series: [
          {
            data: this.in_num,
            type: 'bar'
          },
          {
            data: this.out_num,
            type: 'bar'
          }
        ]
      })
    },
    pieChart2 () {
      let pieChart = echarts.init(document.getElementById('pieChart2'))
      pieChart.setOption({

        title: {
          text: '一周内入站人数',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              fontSize: '20',
              emphasis: {
                show: true
              },
              normal: {
                show: true,
                // position:'inner', //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 16 // 文字的字体大小
                },
                formatter: '{d}%'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: true,
              emphasis: {
                show: true
              }
            },
            data: [
              { value: this.in_num[0], name: '星期一', itemStyle: { color: '#F62120' } },
              { value: this.in_num[1], name: '星期二', itemStyle: { color: '#FF9600' } },
              { value: this.in_num[2], name: '星期三', itemStyle: { color: '#D1624C' } },
              { value: this.in_num[3], name: '星期四', itemStyle: { color: '#84A729' } },
              { value: this.in_num[4], name: '星期五', itemStyle: { color: '#5DC5E8' } },
              { value: this.in_num[5], name: '星期六', itemStyle: { color: '#FAC03D' } },
              { value: this.in_num[6], name: '星期天', itemStyle: { color: '#45465E' } }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
